<template>
  <div>
    <input :type="inputType" name id value 
    :placeholder="placeHolder" 
    v-model="inputValue"
    :class="{
       success:showerr,
       error:!showerr
    }"
    @blur="blured"
    />
    <!-- :class="showerr==true?'success':'error'"   三元表达式的赋值类名-->
    <br />
  </div>
</template>

<script>
export default {
    //子组件接收的参数 
  props: ["inputType","placeHolder","rule","err_msg"],
  //表单的value值
  data(){
    return {
      inputValue:'',
      showerr: true
    }
  },
  methods:{
    //失去焦点后的事件,如果还是报错就显示提示框
    blured(){
      if(!this.showerr){
        this.$toast(this.err_msg);
      }
    }
  },
  watch:{
    //监视表单的value值变化
    inputValue(){
        const res = RegExp(this.rule)
        // console.log(res);
        //value符合正式表达式给表单添加一个success类名
        if(res.test(this.inputValue) || this.inputValue ==''){
             this.showerr = true
             this.$emit('Valuechange',this.inputValue)
        }else{
           //value不符合正式表达式给表单添加一个success类名
             this.showerr = false
             
        }
    }
  }
};
</script>

<style lang="less" scoped>
input {
  width: 320/360 * 100vw;
  height: 30/360 * 100vw;
  margin: 10/360 * 100vw 20/360 * 100vw;
  font-size: 14/360 * 100vw;
  outline: none;
}
.error {
  border-color: red;
}
</style>